<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT" />










<meta name="description" content="[TOC] Day04：1、HTML和CSS结合的方式 （1）每个HTML标签里都有一个属性 style属性，在该属性中设置样式： 123&amp;lt;p style=&amp;quot;color:#333;font-size:18px&amp;quot;&amp;gt;    XXX&amp;lt;/p&amp;gt;  （2）在头声明中添加； 123&amp;lt;head&amp;gt;    &amp;lt;style&amp;gt;在这里写上样式&amp;lt;/sty">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaWeb-学习总结">
<meta property="og:url" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="[TOC] Day04：1、HTML和CSS结合的方式 （1）每个HTML标签里都有一个属性 style属性，在该属性中设置样式： 123&amp;lt;p style=&amp;quot;color:#333;font-size:18px&amp;quot;&amp;gt;    XXX&amp;lt;/p&amp;gt;  （2）在头声明中添加； 123&amp;lt;head&amp;gt;    &amp;lt;style&amp;gt;在这里写上样式&amp;lt;/sty">
<meta property="og:locale" content="default">
<meta property="og:image" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/assets/响应编码.jpg">
<meta property="og:image" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/assets/请求编码.jpg">
<meta property="og:image" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/assets/GET请求编码.jpg">
<meta property="og:image" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/....">
<meta property="og:updated_time" content="2018-11-21T11:14:00.156Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaWeb-学习总结">
<meta name="twitter:description" content="[TOC] Day04：1、HTML和CSS结合的方式 （1）每个HTML标签里都有一个属性 style属性，在该属性中设置样式： 123&amp;lt;p style=&amp;quot;color:#333;font-size:18px&amp;quot;&amp;gt;    XXX&amp;lt;/p&amp;gt;  （2）在头声明中添加； 123&amp;lt;head&amp;gt;    &amp;lt;style&amp;gt;在这里写上样式&amp;lt;/sty">
<meta name="twitter:image" content="http://yoursite.com/2018/11/13/JavaWeb-学习总结/assets/响应编码.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2018/11/13/JavaWeb-学习总结/"/>





  <title>JavaWeb-学习总结 | Hexo</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="default">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Hexo</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            Archives
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2018/11/13/JavaWeb-学习总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="John Doe">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/head.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">JavaWeb-学习总结</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-11-13T15:15:57+08:00">
                2018-11-13
              </time>
            

            
              <span class="post-meta-divider">|</span>
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-check-o"></i>
              </span>
              
                <span class="post-meta-item-text">Post modified&#58;</span>
              
              <time title="Post modified" itemprop="dateModified" datetime="2018-11-21T19:14:00+08:00">
                2018-11-21
              </time>
            
          </span>

          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">Words count in article&#58;</span>
                
                <span title="Words count in article">
                  10.8k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">Reading time &asymp;</span>
                
                <span title="Reading time">
                  40
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>[TOC]</p>
<h1 id="Day04："><a href="#Day04：" class="headerlink" title="Day04："></a>Day04：</h1><h3 id="1、HTML和CSS结合的方式"><a href="#1、HTML和CSS结合的方式" class="headerlink" title="1、HTML和CSS结合的方式"></a>1、HTML和CSS结合的方式</h3><p> （1）每个HTML标签里都有一个属性 style属性，在该属性中设置样式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;p style=&quot;color:#333;font-size:18px&quot;&gt;</span><br><span class="line">    XXX</span><br><span class="line">&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p> （2）在<head><meta name="generator" content="Hexo 3.8.0">头声明中添加；</head></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;style&gt;在这里写上样式&lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br></pre></td></tr></table></figure>
<p> （3）在<head><meta name="generator" content="Hexo 3.8.0">头声明中引入外部CSS文件；<u>注意：在某些浏览器中，该引入方式不起作用</u></head></p>
<p> （4）通过头标签<link>引入外部文件；</p>
<p><strong>优先级（一般情况）：</strong></p>
<p>– 由上到下，由外到内，优先级由低到高。</p>
<p>– <del>后加载的优先级高</del>；范围越小的优先级越高；</p>
<h4 id="1-CSS的基本选择器"><a href="#1-CSS的基本选择器" class="headerlink" title="1 CSS的基本选择器"></a>1 CSS的基本选择器</h4><p> （1）标签选择器：使用标签名作为选择器的名称；</p>
<p> （2）class选择器：：为HTML标签定义一个class名称，并使用这个名称作为选择器；</p>
<pre><code>-- &lt;div class=&quot;aaa&quot;&gt;aaaaaa&lt;/div&gt;

在&lt;style&gt;标签中写上：div.aaa { ***}
</code></pre><p> （3）id选择器：为HTML标签定义一个id名称，并使用这个名称作为选择器</p>
<pre><code>-- &lt;div id=&quot;aaa&quot;&gt;aaa&lt;/div&gt;

在&lt;style&gt;标签中写上div#id {***}
</code></pre><h4 id="2-CSS的扩展选择器"><a href="#2-CSS的扩展选择器" class="headerlink" title="2 CSS的扩展选择器"></a>2 CSS的扩展选择器</h4><p>（1）关联选择器：设置嵌套标签的样式</p>
<pre><code>-- &lt;div&gt;&lt;p&gt;sdkfhskd&lt;/p&gt;&lt;/div&gt;

-- 只设置里面的p标签的样式；

-- div p {****}
</code></pre><p>（2）组合选择器</p>
<p>（3）伪元素选择器</p>
<h4 id="3-CSS中的盒子模型"><a href="#3-CSS中的盒子模型" class="headerlink" title="3 CSS中的盒子模型"></a>3 CSS中的盒子模型</h4><pre><code>在进行布局前需要把数据封装到一块一块的区域（div）里，称作盒子；
</code></pre><p>（1）边框</p>
<p>（2）内边距</p>
<p>（3）外边距</p>
<h4 id="4-CSS的布局的漂浮（了解即可）"><a href="#4-CSS的布局的漂浮（了解即可）" class="headerlink" title="4 CSS的布局的漂浮（了解即可）"></a>4 CSS的布局的漂浮（了解即可）</h4><h4 id="5-CSS布局的定位（了解即可）"><a href="#5-CSS布局的定位（了解即可）" class="headerlink" title="5 CSS布局的定位（了解即可）"></a>5 CSS布局的定位（了解即可）</h4><pre><code>属性值position
</code></pre><h3 id="2、javascript"><a href="#2、javascript" class="headerlink" title="2、javascript"></a>2、javascript</h3><h4 id="1-javascript的组成"><a href="#1-javascript的组成" class="headerlink" title="1.  javascript的组成"></a>1.  javascript的组成</h4><p>（1）ECMAScript</p>
<pre><code>-- 由ECMA组织制定javascript的语法
</code></pre><p>（2）BOM</p>
<pre><code>-- 浏览器对象模型（browser object model）
</code></pre><p>（3）DOM</p>
<pre><code>-- 文档对象模型（document object model）
</code></pre><h4 id="2-js和HTML的结合方式（两种）"><a href="#2-js和HTML的结合方式（两种）" class="headerlink" title="2. js和HTML的结合方式（两种）"></a>2. js和HTML的结合方式（两种）</h4><ol>
<li>使用一个标签,<script type="text/javascript">这里写js代码</script>；<br>注意：上面的标签可以写在<body>标签里</body></li>
<li>引入外部js文件：<br>– 引入语法：<script type="text/javascript" src="写上路径"></script><br>注意：第二种（引入外部js文件）方法的标签体里面，js代码不会执行，因此，不要在标签体中写代码</li>
</ol>
<h4 id="3-js的原始类型（五种）"><a href="#3-js的原始类型（五种）" class="headerlink" title="3. js的原始类型（五种）"></a>3. js的原始类型（五种）</h4><pre><code>js的原始数据类型有五种：string（注意不要大写）、number、boolean、null、undefined；通过函数`typeof()`可以查看对应变量的数据类型；
</code></pre><h4 id="4-js的运算符"><a href="#4-js的运算符" class="headerlink" title="4. js的运算符"></a>4. js的运算符</h4><ol>
<li>js中字符串的相加和相减的运算逻辑不一样：”456” + 1 = “4561”;   “456”-1 = 455；<br>如果字符串中的内容不是一个数字，那么会提示”NaN”;</li>
<li>js中的 true和false分别对应整数1和0</li>
<li>==  和 === 的区别：<br>== 比较值； === 比较值和类型；</li>
</ol>
<h4 id="5-js的函数定义及调用"><a href="#5-js的函数定义及调用" class="headerlink" title="5. js的函数定义及调用"></a>5. js的函数定义及调用</h4><p>格式： function 函数名(参数列表) {***}</p>
<p>注意：参数列表中的参数不用加上<code>var</code>关键字；</p>
<h4 id="6-js的全局变量好局部变量"><a href="#6-js的全局变量好局部变量" class="headerlink" title="6. js的全局变量好局部变量"></a>6. js的全局变量好局部变量</h4><p><strong>全局变量</strong>：在script标签里定义的一个变量，这些变量可以在页面中js部分都可以使用（包括其他部分的script标签都能使用）；</p>
<p>局部变量：在方法内部定义的变量</p>
<h4 id="7-script标签的位置"><a href="#7-script标签的位置" class="headerlink" title="7. script标签的位置"></a>7. script标签的位置</h4><pre><code>由于HTML的解析是从上到下解析，因此，如果js文件中需要用到body标签中某个id，那么需要先解析id，再解析js代码；即：js代码放在id定义之后。

建议：把&lt;script&gt;标签放在&lt;body&gt;标签的后面
</code></pre><p><strong>js是否存在重载？？？</strong></p>
<h1 id="Day-03"><a href="#Day-03" class="headerlink" title="Day 03"></a>Day 03</h1><h3 id="9、dom-对象"><a href="#9、dom-对象" class="headerlink" title="9、dom 对象"></a>9、dom 对象</h3><p>dom：文档对象模型</p>
<pre><code>-- 文档：指的是超文本标记文档

-- 对象：提供了属性和方法操作

-- 模型：使用属性和方法操作超文本标记型文档
</code></pre><p>即：使用dom中提供的对象里面的属性和方法，对标记型文档进行操作。</p>
<p><strong>解析过程</strong>：</p>
<pre><code>根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象，

-- document对象： 整个文档

-- element对象：标签对象；

-- 文本对象：

-- Node节点对象： 是上面所有对象的父对象，定义了很多方法；
</code></pre><h1 id="Day05"><a href="#Day05" class="headerlink" title="Day05"></a>Day05</h1><h2 id="使用dom4j查询xml"><a href="#使用dom4j查询xml" class="headerlink" title="使用dom4j查询xml"></a>使用dom4j查询xml</h2><p>步骤：</p>
<ol>
<li>创建解析器；</li>
<li>得到document对象；</li>
<li>得到根节点；（上面三步都是相对固定的）</li>
<li>得到所有的p1标签；</li>
<li>得到name；</li>
<li>得到name的值；</li>
</ol>
<h2 id="使用dom4j实现添加操作"><a href="#使用dom4j实现添加操作" class="headerlink" title="使用dom4j实现添加操作"></a>使用dom4j实现添加操作</h2><p>需求：在第一个p1标签末尾添加一个元素<sex></sex></p>
<h1 id="Day-03-1"><a href="#Day-03-1" class="headerlink" title="Day 03"></a>Day 03</h1><h2 id="一、javascript的对象"><a href="#一、javascript的对象" class="headerlink" title="一、javascript的对象"></a>一、javascript的对象</h2><h3 id="1-Array-对象的push函数"><a href="#1-Array-对象的push函数" class="headerlink" title="1. Array 对象的push函数"></a>1. Array 对象的push函数</h3><pre><code>A.push(B)：往A中加入元素B，并返回加入元素A后的长度。
</code></pre><p>注意：B是一个整体，每次push之后，A的长度+1（即使B是一个数组）。</p>
<h3 id="2、Date对象"><a href="#2、Date对象" class="headerlink" title="2、Date对象"></a>2、Date对象</h3><ol>
<li>getTime() 函数用于获取1970年1月1日至今的毫秒数；<br>应用场景：使用毫秒数避免缓存</li>
</ol>
<h3 id="3、Math对象"><a href="#3、Math对象" class="headerlink" title="3、Math对象"></a>3、Math对象</h3><pre><code>Math对象里面的函数都是静态函数，因此，不需要新建一个Math对象（实际上，也不能新建Math对象），就可以使用里面的方法；
</code></pre><h3 id="4、全局函数"><a href="#4、全局函数" class="headerlink" title="4、全局函数"></a>4、全局函数</h3><ol>
<li>使用encodeURL() 和 decodeURL() 分别对中文字符进行编码和解码（因为直接输出中文时会出现乱码）</li>
</ol>
<h3 id="6、js-函数的重载"><a href="#6、js-函数的重载" class="headerlink" title="6、js 函数的重载"></a>6、js 函数的重载</h3><p>js 中不存在函数的重载；相同名称的函数，前面的函数会被最后一个函数所覆盖；</p>
<p>传递给函数的所有参数，都会被保存到一个数组对象 arguments 中；</p>
<p>问：js中是否存在重载？</p>
<p>答：（1） js 中不存在重载；</p>
<pre><code>（2）但是可以通过其他方式实现和重载相类似的功能；（通过arguments 数组可以模拟重载的效果）
</code></pre><h3 id="7、BOM对象"><a href="#7、BOM对象" class="headerlink" title="7、BOM对象"></a>7、BOM对象</h3><pre><code>BOM中有哪些对象：

① navigator：获取客户机（浏览器）的名称；

② screen：获取屏幕的信息（宽、高等）

③ location：请求的URL地址

        -- href  属性（获取请求的URL旗帜、设置URL地址）

④ history：请求的URL历史记录

⑤ window（重要）：窗口对象、顶层对象，所有bom对象都是在window对象里操作；
</code></pre><h3 id="window对象中的函数"><a href="#window对象中的函数" class="headerlink" title="window对象中的函数"></a>window对象中的函数</h3><p>– setInterval()</p>
<pre><code>以指定的周期执行js代码；
</code></pre><p>– setTimerout()</p>
<pre><code>指定的时间过后执行js代码，但是只会执行一次；
</code></pre><p>– clearInterval()</p>
<pre><code>清除setInterval设置的定时器
</code></pre><p>– clearTimeout()</p>
<pre><code>清除setTimerout设置的定时器
</code></pre><h3 id="document-对象"><a href="#document-对象" class="headerlink" title="document 对象"></a><strong>document 对象</strong></h3><pre><code>表示整个的文档
</code></pre><p>常用方法：</p>
<p>– getElementById()：得到对应id的标签</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> A = <span class="built_in">document</span>.getElementById(id名称);</span><br><span class="line">通过 A.属性名称 即可访问、设置A对应的属性名称的值</span><br></pre></td></tr></table></figure>
<p>– getElementsByName()：通过标签的那么属性值得到标签，返回的是一个集合（数组）</p>
<p>– getElementsByTagName(“标签的名称”)：</p>
<h3 id="window案例"><a href="#window案例" class="headerlink" title="window案例"></a><strong>window案例</strong></h3><p>要点：B页面需要得到A页面的id（即：需要实现跨页面操作）；可以通过当前window的opener属性得到父窗口；</p>
<pre><code>此外，如果A页面和B页面都是编写在本地的话，通过谷歌浏览器不能从A页面跳转到B页面（因为javascript的安全性问题，并且谷歌浏览器安全级别很高）；但是实际开发中不存在这种问题，因为都是页面都是部署到服务器上运行的。
</code></pre><p><strong>步骤</strong></p>
<ol>
<li>编写一个html页面，上面放置两个输入框和一个按钮；按钮上注册一个点击事件，当点击发生时，打开一个新的窗口；</li>
<li>编写另外一个html页面，这个页面上编写一个表格，在这个表格中填入数据：4*3,一列按钮，一列编号，一列姓名；</li>
<li>在B页面中将数据设置到A页面中。</li>
</ol>
<h3 id="element对象"><a href="#element对象" class="headerlink" title="element对象"></a><strong>element对象</strong></h3><ol>
<li>removeAttribute 方法不能删除 value 属性；</li>
<li>利用 元素标签.childNodes 得到的子标签数组，在各个浏览器中存在着兼容性问题，要想获取准确的子标签对象，只能通过 元素标签.getElementsByTagName 方法来获取；</li>
</ol>
<h3 id="Node对象"><a href="#Node对象" class="headerlink" title="Node对象"></a><strong>Node对象</strong></h3><p><strong>属性</strong>：</p>
<ul>
<li>nodeName：对应标签</li>
<li>nodeType：对应属性</li>
<li><p>nodeValue：对应文本</p>
</li>
<li><p>父节点：parentNode</p>
</li>
<li>子节点：childNodes可以得到所有子节点，但是兼容性很差</li>
</ul>
<h3 id="操作dom树"><a href="#操作dom树" class="headerlink" title="操作dom树"></a>操作dom树</h3><p><strong>appendChild方法</strong></p>
<pre><code>如果把元素A中的子元素A0通过该方法添加到另外一个元素B中去，那么原来的元素A将失去子元素A0（可能由于dom中各个元素只能有一个父节点）；该功能类似于剪切粘贴的操作。
</code></pre><p><strong>insertBefore方法</strong></p>
<pre><code>用法： `父节点.insertBefore(新节点，旧节点)`，可以实现在旧节点之前添加新节点，并且使得新节点同样位于父节点之下；
</code></pre><h3 id="innerHTMl属性"><a href="#innerHTMl属性" class="headerlink" title="innerHTMl属性"></a>innerHTMl属性</h3><pre><code>这个属性不是dom的组成部分，同时，多数浏览器也支持这个属性；

作用：① 获取文本内容； ② 往div中设置内容（可以是HTML代码）
</code></pre><p>注：javascript编写习惯：每写一行javascript代码，就观察一下该代码的效果（因为Javascript不是编译型语言）</p>
<p>注意：Day07中的jdk5.0新特性没有看；</p>
<h2 id="Day-08"><a href="#Day-08" class="headerlink" title="Day 08"></a>Day 08</h2><h3 id="一、Tomcat"><a href="#一、Tomcat" class="headerlink" title="一、Tomcat"></a>一、Tomcat</h3><ul>
<li>Tomcat的启动需要在环境变量中设置<code>JAVA_HOME</code>;</li>
<li>WEN-INF目录下的文件不允许浏览器直接访问！</li>
</ul>
<h3 id="二、HTTP协议"><a href="#二、HTTP协议" class="headerlink" title="二、HTTP协议"></a>二、HTTP协议</h3><pre><code>HTTP协议包括请求协议和响应协议，其中，请求协议由客户端的浏览器发送，而响应协议则由服务器发送；
</code></pre><p>请求协议的格式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">请求行</span><br><span class="line">头信息：由头名称+头值组成</span><br><span class="line">空行</span><br><span class="line">请求体</span><br></pre></td></tr></table></figure>
<p>注意：GET请求没有请求体！但是必须有空行；</p>
<p>响应协议的格式如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">响应行（协议/版本 状态吗 状态吗解析） **注意：状态吗首个数字定义了各种状态</span><br><span class="line">响应头（key/value格式）</span><br><span class="line">空行</span><br><span class="line">响应正文（响应体）</span><br></pre></td></tr></table></figure>
<p>表单中的url编码：</p>
<pre><code>如果是中文，那么先把中文的每个汉字对应转换成三个字节（在utf-8的编码格式下），得到三个数值a~1~、a~2~、a~3~；接着分别将各个数值+128，得到新的三个数值，最后转换成16进制
</code></pre><p>Refer头</p>
<p>作用：① 统计访问量； ② 防止盗链</p>
<p>原理：根据当前的请求头来判断</p>
<p>状态码：</p>
<ul>
<li>200：请求成功；</li>
<li>404：请求的资源没有找到；</li>
<li>500：请求的资源找到了，但是服务器内部出现了错误；</li>
<li>302重定向，需要浏览器再一次发送一个请求给服务器；服务器发送302响应码会带有一个响应头Location，它指定了请求的URL地址；</li>
<li>304：假如浏览器两次请求index.html，如果两次的修改时间是一致的，那么服务器会给浏览器发送304响应码，此时，浏览器会直接从本地缓存中读取index.html；（注意：这个响应码只对html有效）</li>
</ul>
<p>Tomcat会把jsp（动态资源）转换成静态资源（HTML），这时，浏览器才能解析；</p>
<p>JSP中的meta标签可以模拟响应头</p>
<h1 id="Day09"><a href="#Day09" class="headerlink" title="Day09"></a>Day09</h1><h3 id="一、Servlet"><a href="#一、Servlet" class="headerlink" title="一、Servlet"></a>一、Servlet</h3><h4 id="1-学习-Servlet-接口"><a href="#1-学习-Servlet-接口" class="headerlink" title="1 学习 Servlet 接口"></a>1 学习 Servlet 接口</h4><pre><code>创建一个类A，实现Servlet接口；
</code></pre><p>注意：</p>
<p>① 类A中实现的接口方法，多数不由我们来调用；并且Servlet对象也不由我们来创建，他们都是由服务器来调用或创建；（准确来说，生命周期方法由服务器来调用）</p>
<p>如何让浏览器访问Servlet：</p>
<ol>
<li>给Servlet指定一个Servlet路径（即“绑定”）；而给Servlet绑定路径，需要在<code>web.xml</code>中进行配置；</li>
<li>浏览器访问Servlet路径；</li>
</ol>
<pre><code>当浏览器第一次发送请求时，Servlet会被创建（执行`init`方法），并被响应（执行`servlce`方法），服务器关闭时会销毁Servlet（执行`destroy`方法）；

一个Servlet类只会被创建一次，如果多个客户端要访问同一个Servlet，那么就会出现线程安全问题（因为Servlet不是线程安全的接口）
</code></pre><p>总结如下：</p>
<ol>
<li>生命周期方法：<ul>
<li><code>void init(ServletConfig)</code>创建之后立即执行</li>
<li><code>void service(ServletRequest request, ServletResponse)</code>每次客户端访问时被调用；</li>
<li><code>void destroy()</code> 对象被销毁之前执行，用于释放资源等；</li>
</ul>
</li>
<li>特性：<ul>
<li>单例，一个类只有一个对象；</li>
<li>线程不安全，但是运行效率高；</li>
</ul>
</li>
</ol>
<h4 id="2-ServletConfig-对象"><a href="#2-ServletConfig-对象" class="headerlink" title="2 ServletConfig 对象"></a>2 ServletConfig 对象</h4><pre><code>`web.xml`中的配置最终会通过xml解析器加载到内存中去，而一个ServletConfig对象对应一个&lt;servlet&gt;标签中的配置；
</code></pre><p>技巧：<code>day09-&gt;8.GenericServlet介绍</code>中11:00~14:00 介绍了多回调的技巧</p>
<h4 id="3-HttpServlet类"><a href="#3-HttpServlet类" class="headerlink" title="3 HttpServlet类"></a>3 HttpServlet类</h4><p>从请求到响应方法的流程：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">① 客户端发出请求（GET或POST请求）；</span><br><span class="line">② Tomcat调用Servlet的生命周期方法(service(ServletRequest, ServletResponse))，然后再该方法中，将参数强制转换为HttpServletRequest和HttpServletResponse，然后调用方法service(HttpServletRequest, HttpServletResponse)；</span><br><span class="line">③ 在第二个service方法中，根据客户端发出的请求时GET还是POST，调用方法doGet()或doPost();	注意：如果客户端中有请求，但是Servlet的实现类中没有覆盖doGet或doPost方法，会出现405错误</span><br></pre></td></tr></table></figure>
<h4 id="4-Servlet细节"><a href="#4-Servlet细节" class="headerlink" title="4 Servlet细节"></a>4 Servlet细节</h4><p>在服务器启动时创建Servlet：</p>
<pre><code>利用标签&lt;load-on-startup&gt;来指定在服务器启动时创建Servlet的顺序（值越小，越先被创建）；
</code></pre><p>路径匹配：</p>
<pre><code>可以利用通配符`*`进行多个路径的匹配，但是`*`只能出现在路径的两端（最开始和最后），不能出现在中间；
</code></pre><h4 id="5-ServletContext-对象"><a href="#5-ServletContext-对象" class="headerlink" title="5 ServletContext 对象"></a>5 ServletContext 对象</h4><pre><code>一个项目中只有一个ServletContext对象，因此，可以在任意个Servlet中获取相同的ServletContext对象，同时，使用它也可以在不同的Servlet之间传递信息；



利用ServletContext对象可以得到初始化参数，但是这个初始化和Servlet初始化参数不一样，它是全局的初始化参数；
</code></pre><h4 id="6-获取类路径下的资源"><a href="#6-获取类路径下的资源" class="headerlink" title="6 获取类路径下的资源"></a>6 获取类路径下的资源</h4><pre><code>使用`Class`和 `ClassLoader`可以获取类路径资源，其中`ClassLoader`较为常用；

类路径对一个JavaWeb项目而言，就是`/WEB-INF/classes`和（`/WEB-INF/lib`每个jar包）；
</code></pre><h5 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h5><p>利用<code>ClassLoader</code>类得到资源文件，参数值是相对于资源目录下的文件，即<code>WEB-INF/classes</code>目录；注意，参数前面不用带<code>/</code>；</p>
<p>利用<code>Class</code>类得到资源文件：</p>
<ol>
<li>如果参数不带<code>/</code>，那么是相对于当前class所在的目录;</li>
<li>如果参数带<code>/</code>，那么是相对于类路径下的目录；</li>
</ol>
<p>注意：一般获取项目根目录，利用ServletContext的对象来获取；</p>
<h1 id="Day10"><a href="#Day10" class="headerlink" title="Day10"></a>Day10</h1><h2 id="一、HttpServletResponse"><a href="#一、HttpServletResponse" class="headerlink" title="一、HttpServletResponse"></a>一、HttpServletResponse</h2><p>状态码：</p>
<p>200表示成功、302表示重定向（需要添加Location头）、404表示资源没找到、500表示服务区错误；</p>
<p>状态码方法：</p>
<p><code>sendError(int sc)</code>：发送错误码；</p>
<p><code>sendError(int sc, String msg)</code>    ：发送错误码的同时捎带一个错误信息；</p>
<p><code>setStatus(int sc)</code>：发送成功的状态码，<strong>可以用来发送302</strong>；</p>
<p>响应头方法：</p>
<p><code>setHeader(String name, String value)</code>：设置单值的响应头；</p>
<p>Servlet的两个流：</p>
<p><code>ServletOutputStream</code>：用来向客户端发送字节流； 用法：<code>ServletOutputStream out = response.getOutputStream();</code></p>
<p><code>PrintWriter</code>：用来向客户端发送字符流，需要设置编码； 用法：<code>PrintWriter writer = response.getWriter();</code></p>
<p>上面提到的两种流不能同时使用；</p>
<h2 id="二、HttpServletRequest"><a href="#二、HttpServletRequest" class="headerlink" title="二、HttpServletRequest"></a>二、HttpServletRequest</h2><p>获取常用信息：</p>
<p>① 获取客户端IP：<code>request.getRemoteAddr();</code>； 用途：封IP;</p>
<p>注意：在Windows7系统中，获取IP地址，可能会出现<code>0:0:0:0:0:0:0:1</code>，因为获取的是ipv6地址；</p>
<p>② 获取哦请求方式：<code>request.getMethod()</code>，可能是POST或GET；</p>
<p>获取HTTP请求头：</p>
<p><code>String getHeader(String name)</code>：用于单值头；</p>
<p>获取请求参数：</p>
<p><code>String getParameter(String name)</code>：获取请求参数的值（单个值）；</p>
<p><code>String getParameterValues(String name)</code>：获取请求参数的值（多个值）；</p>
<p><code>Map&lt;String, String[]&gt; getParameterMap()</code>：获取所有请求参数，其中，key为参数名，value为参数值；</p>
<p>请求转发和请求包含（注意<strong>“14.请求转发和请求包含、延时请求转发.avi”</strong>这个视频）：</p>
<pre><code>有时候一个请求需要多个Servlet协作才能完成，所以需要在一个Servlet跳转到另外一个Servlet；
</code></pre><ul>
<li>一个请求跨多个Servlet，需要使用转发和包含；</li>
<li>请求转发：由下一个Servlet完成响应体，当前的Servlet可以设置响应头（留头不留体）；</li>
<li><p>请求包含：两个Servlet共同完成响应体（留头又留体）；</p>
<p> <del>客户端发送一个请求到AServlet，AServlet收到请求后，需要BServlet“协助”（即：一个请求需要2个到多个Servlet才能完成），这时候就需要使用请求转发和请求包含；注意：客户端由始至终只创建了一个请求，而服务器也只发送一个响应给客户端；</del></p>
</li>
</ul>
<p><code>RequestDispatcher rd = request.getRequestDispatcher();</code>：获取转发器；</p>
<p><code>rd.forward(request, response)</code>：请求转发（重点）；</p>
<p><code>rd.include(request, response)</code>：请求包含</p>
<p>request域：</p>
<pre><code>request中的属性是Servlet和Servlet之间在转发或包含时用来传值的；注意：① 不能跨请求传、取值，只能在一个请求范围中传和取；② 请求参数是客户端发送给服务器的，和request中的属性不同；

Servlet中的三大域对象：request、session、application，它们都有三个方法：
</code></pre><ul>
<li><code>void setAttribute(String name, Object object)</code>：向request中设置</li>
<li><code>Object getAttribute(String name)</code></li>
<li><code>void removeAttribute(String name)</code></li>
</ul>
<p>请求转发和重定向的区别：</p>
<ol>
<li>请求转发所示一个请求一次响应，而重定向是两个请求两次响应；</li>
<li>请求转发中的地址栏没有变化，而重定向中会显示最后一个请求的地址；</li>
<li>请求转发只能转发到本项目其他的Servlet，而重定向不仅能重定向到本项目的其他Servlet，还能重定向到其他项目；</li>
<li>请求转发是服务器行为，只需要给出Servlet路径，而重定向需要给出requestURI（即：包含项目名称）；</li>
<li>请求转发的效率比重定向要高；</li>
</ol>
<h2 id="三、编码与解码"><a href="#三、编码与解码" class="headerlink" title="三、编码与解码"></a>三、编码与解码</h2><p>响应编码与解码：</p>
<ol>
<li>服务器给客户端发送数据时，默认使用的是ISO编码；而浏览器一般使用GBk进行解码；</li>
</ol>
<p><img src="/2018/11/13/JavaWeb-学习总结/assets\响应编码.jpg" alt=""></p>
<p>请求编码与解码：</p>
<p>客户端传递给服务器的数据是如何编码的？</p>
<ul>
<li>如果在地址栏中直接给出参数，那么请求编码使用GBK进行编码的；</li>
<li>如果实在页面中点击表单或链接：如果页面的编码是UTF-8的话，那么参数是用UTF-8进行编码；</li>
</ul>
<p><img src="/2018/11/13/JavaWeb-学习总结/assets\请求编码.jpg" alt=""></p>
<p>注意：GET请求设置编码需要到tomcat目录下的<code>/config/server.xml</code>中进行设置（但是最好不要用）；而POST直接调用<code>setCharacterEncoding(&quot;utf-8&quot;)</code>即可；</p>
<p><img src="/2018/11/13/JavaWeb-学习总结/assets\GET请求编码.jpg" alt="修改Tomcat的server.xml文件"></p>
<p>URL编码：</p>
<pre><code>表单的类型：`ContentType: application/x-www-form-urlencoded`：把中文转成`% + 两位的16进制编码`，它不是编码格式，而是在字符编码（GBk等）基础上再进行转换；

在客户端发给服务器的    GET请求时，如果请求参数包含中文，该请求不会使用URL编码，此时，有可能出现丢失字节的现象；

**今后，我们需要把超链接中的中文，使用URL进行编码；**
</code></pre><h2 id="四、路径"><a href="#四、路径" class="headerlink" title="四、路径"></a>四、路径</h2><ul>
<li>web.xml中<url-pattern>路径，要么以<code>*</code>开头，要么以<code>/</code>开头，相对于当前项目；</url-pattern></li>
<li>转发和包含路径：<ul>
<li>以<code>/</code>开头，那么是相对于当前项目路径；（尽量使用这种方式）</li>
<li>不以<code>/</code>开头，相对于当前Servlet路径；</li>
</ul>
</li>
<li>重定向路径（客户端路径）：<ul>
<li>以<code>/</code>开头，相对于当前主机（即：<code>http://localhost</code>）</li>
</ul>
</li>
<li>页面中的超链接和表单路径：<ul>
<li>与重定向相同，都是客户端路径，如果以<code>/</code>开头，需要添加项目名称；（建议使用这种方式）</li>
<li>如果不以<code>/</code>开头，那么相对于当前页面的路径；</li>
</ul>
</li>
<li>ServletContext获取资源路径：<ul>
<li>相对于当前项目目录；</li>
</ul>
</li>
<li>ClassLoader获取资源路径：<br>相对于类路径下获取资源；（注意：参数不能以<code>/</code>开头）</li>
<li>Class获取资源路径：<ul>
<li>以<code>/</code>开头，相对于<code>WEB-INF/classes</code>目录;</li>
<li>不以<code>/</code>开头，相对于当前类字节码<code>.class</code>所在的目录（即，需要带上当前类的包名）；</li>
</ul>
</li>
</ul>
<h1 id="Day11"><a href="#Day11" class="headerlink" title="Day11"></a>Day11</h1><h2 id="一、JSP"><a href="#一、JSP" class="headerlink" title="一、JSP"></a>一、JSP</h2><p>JSP的作用：</p>
<ul>
<li><p>Servlet优缺点：</p>
<ul>
<li>缺点：不适合设置HTML响应体，如<code>response.getWriter().print(&quot;&lt;html&gt;&quot;)</code>；</li>
<li>优点：动态资源，可以变成；</li>
</ul>
</li>
<li><p>HTML优缺点：</p>
<ul>
<li>缺点：html是静态资源页面，不能包含动态信息；</li>
<li>优点：不用输出html标签；</li>
</ul>
</li>
<li><p>JSP（java server page）</p>
<ul>
<li>优点：在原有html的基础上添加java脚本</li>
</ul>
<p>它是服务端页面，不能被客户端所识别；</p>
</li>
</ul>
<p>JSP和Servlet的分工：</p>
<ul>
<li>JSP作为请求发起页面，例如：显示表单、超链接；同时，也作为请求结束页面，例如显示数据；</li>
<li>Servlet作为请求中处理数据的环节；</li>
</ul>
<p>JSP组成</p>
<p>JSP = html + java脚本 + jsp标签；</p>
<p>JSP中无需创建即可使用的对象有9个，称为9大内置对象；</p>
<p>3中java脚本：</p>
<ul>
<li><code>&lt;%...%&gt;</code>：java代码片段，用于定义0~N条java语句（注意，不能定义方法）；</li>
<li><code>&lt;%=...%&gt;</code>：java表达式，常用于输出一条表达式的结果；</li>
<li><code>&lt;%!...%&gt;</code>：生命，用来创建类的成员变量和成员方法（基本不用）；</li>
</ul>
<p>注意：</p>
<ol>
<li>JSP页面中，如果有<code>&lt;base href=&quot;...&quot;&gt;</code>，那么在这个页面上的所有<code>&lt;a href=&quot;a0&quot;&gt;</code>，如果a0不以<code>/</code>开头，那么a标签的超链接都是相对于<code>base</code>的；（视频：“<strong>3.jsp中java脚本的使用</strong>”）</li>
</ol>
<p>JSP原理：</p>
<pre><code>JSP其实是一种特殊的Servlet；① 当jsp页面被第一次访问时，服务器会把jsp文件编译成Java文件（继承了Servlet类），然后再把java文件编译成.class文件，最后创建该类对象，最后调用service方法；② 第一次请求后，如果再有请求，那么直接调用service方法即可；

`tomcat/work`目录下可以找到某个jsp对应的java源码；
</code></pre><h2 id="二、Cookie"><a href="#二、Cookie" class="headerlink" title="二、Cookie"></a>二、Cookie</h2><pre><code>Cookie是HTTP协议制定的！先由服务器保存Cookie到浏览器，等下次浏览器请求服务器时把上一次的请求得到的Cookie归还给服务器；Cookie是一个键值对（只有一个键一个值）
</code></pre><p>特点：</p>
<ul>
<li>每一个由服务端发送到客户端的Cookie的大小是有限制的；</li>
<li>客户端保存在本地的Cookie的总大小也是有限制的；</li>
<li>Cookie是不能跨浏览器的！</li>
</ul>
<p>Cookie用途：</p>
<ul>
<li>服务器用Cookie来跟踪客户端的状态；</li>
<li>保存历史浏览记录（例如购物网站）；</li>
<li>显示登录名；</li>
</ul>
<p>JavaWeb中使用Cookie：</p>
<p>便捷方式：<code>response.addCookie()</code>和<code>request.getCookies()</code>；</p>
<p>Cookie详解：</p>
<p>Cookie的maxAge：指的是Cookie的最大生命时长，以秒为单位；</p>
<ul>
<li><code>maxAge&gt;0</code>：浏览器会把Cookie保存到客户机的硬盘上，有效时长为maxAge；</li>
<li><code>maxAge&lt;0</code>：Cookie只在内存中存在，当用户关闭浏览器时，Cookie也被释放了；</li>
<li><code>maxAge==0</code>：浏览器会马上删掉这个Cookie（如果客户机上存在同名Cookie，那么也会把客户端的Cookie删掉）；</li>
</ul>
<p>Cookie的path：Cookie的path是由服务器创建Cookie时设置的，当浏览器访问服务器某个路径时，需要归还的Cookie，是由path所决定的：当浏览访服务器的路径$p_0$包含Cookie的path时，就会把该Cookie带上并发给服务器；（注意：path不是值Cookie保存在客户机硬盘上的路径！）</p>
<h2 id="三、HttpSession"><a href="#三、HttpSession" class="headerlink" title="三、HttpSession"></a>三、HttpSession</h2><p>概述：</p>
<ul>
<li>HttpSession是由JavaWeb提供的（不是由Http协议本身所定义的），用来会话跟踪的类。<code>session</code>是服务端对象，保存在服务端。（而Cookie和Http协议相关的，而且保存在客户机上）</li>
</ul>
<p>HttpSession的作用：</p>
<ul>
<li>会话范围：会话范围是某个用户从首次访问服务器开始，到该用户关闭浏览器结束；会话是指一个用户对服务器多次连贯性请求，而连贯性指的是该用户多次请求中间没有关闭浏览器（关闭浏览器后重新打开，并访问服务器，这时是第二次会话了）；</li>
<li>session是基于会话而建立的，存活于会话的范围内；一个用户只能有一个session（如果打开两个浏览器并访问同一个网站，这时建立了两个session）；</li>
</ul>
<p>HttpSession原理：</p>
<pre><code>当客户端第一次访问服务器时，服务器会创建一个Session，保存在服务器端，而这个Session的标志ID，则会通过Cookie返回给客户端；当下一次客户端再次访问服务器时，在Cookie中捎带的ID会识别出是服务器的哪一个Session，即找到了原先的Session；

当用户关闭客户端时，保存在客户端的ID就会被清空，因此，即使在服务器存在着Session，也因为没有ID而找不到对应的Session；此外，如果客户端长时间没有访问服务器，服务器也会把这个Session删除，此时需要重新创建新的Session。



但是，服务器并不是在客户端第一次访问时就创建Session，而是第一次调用`request.getSession()`方法时才会创建；关于`getSession()`方法，见下：
</code></pre><ul>
<li>如果没有<code>sessionId</code>或<code>sessionId</code>对应的<code>session</code>不存在，那么服务器会创建一个<code>Session</code>；</li>
<li>如果既有<code>sessionId</code>又有<code>sessionId</code>对应的<code>Session</code>，那么直接返回这个<code>Session</code>对象；</li>
</ul>
<p>注意：如果浏览器直接访问<code>servlet</code>那么需要调用方法<code>request.getSession()</code>如果浏览器访问了<code>jsp</code>页面，那么默认就调用了<code>request.getSession()</code>;</p>
<h1 id="Day12"><a href="#Day12" class="headerlink" title="Day12"></a>Day12</h1><h2 id="一、JSP的三大指令"><a href="#一、JSP的三大指令" class="headerlink" title="一、JSP的三大指令"></a>一、JSP的三大指令</h2><p>格式：</p>
<p><code>&lt;%@page 属性名称=&quot;属性值&quot; 属性名=&quot;属性值&quot;%&gt;</code></p>
<ul>
<li>属性<code>pageEncoding</code>：指定当前JSP页面的编码，在服务器把jsp编译成.java文件时需要使用<code>pageEncoding</code>；</li>
<li><code>contentType</code>：表示添加一个响应头<code>Content-Type</code>，设置页面的编码；</li>
<li>如果上面提及的两个属性只提供一个，那么另一个的默认值也跟随着被设置的属性的值；如果两个属性都没有设置，那么默认为iso编码；</li>
<li><code>errorPage</code>属性：指定当前页面出错时，将会被转发到哪一个页面；<br>注意：当前页面出现错误时，如果指定了<code>errorPage</code>，那么就相当于设置了<code>try...catch...</code>，其中<code>errorPage</code>所指定的值在catch部分执行；最后的状态码是200；</li>
<li><code>isErrorPage</code>：指定当前页面是否为处理错误的页面，如果值为<code>true</code>，那么当从别的页面跳转到当前页面（即错误页面）时，状态码为500；<br>注意：这个页面会设置状态码为500，并且还可以使用9大内置对象中的<code>exception</code>；</li>
</ul>
<h2 id="二、九大内置对象"><a href="#二、九大内置对象" class="headerlink" title="二、九大内置对象"></a>二、九大内置对象</h2><ul>
<li>out：JSP输出流对象；</li>
<li>page：当前JSP的对象，它的类型是Object类型（即：在JSP转化为java代码时，代码中有<code>Object page = this;</code></li>
<li>config：对应“真身”中的ServletConfig对象；</li>
<li>pageContext；</li>
<li>request；</li>
<li>response</li>
<li>exception</li>
<li>session</li>
<li>application</li>
</ul>
<p>pageContext：</p>
<pre><code>Servlet中拥有三大域，而JSP除了可以访问这三大域以外，还拥有pageContext域对象；
</code></pre><p>  用途：</p>
<p>① 域对象，域范围是当前JSP页面，利用它可以在当前JSP以及当前JSP页面中使用的标签之间共享数据；</p>
<p>② 代理其他域，例如：<code>pageContext.setAttribute(&quot;xxx&quot;, &quot;xxx&quot;,PageContext.SESSION_SCOPE)</code>；</p>
<p>③ 获取其他八个内置对象；</p>
<p>④ 全域查找：<code>pageContext.findAttribute(&quot;xxx&quot;);</code>，根据域范围，从小到大，依次查找；</p>
<p>注意：page指的是当前JSP页面的对象，pageContext指的是page的域，是一个域对象；</p>
<h2 id="三、JSP指令"><a href="#三、JSP指令" class="headerlink" title="三、JSP指令"></a>三、JSP指令</h2><p><strong>include指令（静态包含）：</strong></p>
<pre><code>该指令的功能与RequestDispatcher的include方法相似，但是，该指令`&lt;%include%&gt;`是在JSP被编译成java文件时完成的，他们共同生成一个Servlet；而RequestDispatcher的include则是一个方法，包含和被包含的是两个Servlet，他们没有被合并为一个文件，只是想“协作”关系；

注意：被包含的页面不能使变量！例子如下：
</code></pre><p>① 在a.jsp页面中有如下代码：</p>
<figure class="highlight jsp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">........</span><br><span class="line">&lt;%</span><br><span class="line">	String pagePath = <span class="string">"指向b.jsp的路径"</span>;</span><br><span class="line">%&gt;</span><br><span class="line">&lt;%<span class="meta">@include</span> file=<span class="string">"&lt;%=pagePath %&gt;"</span>%&gt;</span><br><span class="line">........</span><br></pre></td></tr></table></figure>
<p>② 因为<code>&lt;%include%&gt;</code>指令是在合并成java文件时执行的（Java文件级别进行合并），而<code>&lt;%=pagePath %&gt;</code>只有在运行时才能确定，因此，不能找到对应的文件进行合并；</p>
<pre><code>这个指令的作用是：可以把页面分解为几个部分，把每个页面的不变的部分提取出来，变化的部分被不变的页面include进去；
</code></pre><p><strong>taglib标签指令</strong></p>
<pre><code>这个指令可以用来导入标签库，有两个属性`prefix`和`uri`。
</code></pre><h2 id="四、JSP动作标签"><a href="#四、JSP动作标签" class="headerlink" title="四、JSP动作标签"></a>四、JSP动作标签</h2><pre><code>JSP动作标签是由服务器来解释执行的，而html标签则是由浏览器来解释执行，两者有着本质的区别。
</code></pre><p>标签如下：</p>
<ul>
<li><code>&lt;jsp:forward&gt;</code>：转发，与RequestDispatcher的forward方法相同；</li>
<li><code>&lt;jsp:include&gt;</code>：包含；<br>注意：厘清<code>&lt;%@include%&gt;</code>和<code>&lt;jsp:include&gt;</code>有什么不同；</li>
<li><code>&lt;jsp:param&gt;</code>：用来作为forward或include标签的子标签，用来传递参数</li>
</ul>
<p>JSP中和JavaBean相关的bean：</p>
<ul>
<li><code>&lt;jsp:useBean&gt;</code>：创建或查询bean，如果查询不到，即创建；</li>
<li><code>&lt;jsp:setProperty&gt;</code>：设置bean的属性值；</li>
<li><code>&lt;jsp:getProperty&gt;</code>：获取bean的属性值；</li>
</ul>
<h2 id="五、JavaBean"><a href="#五、JavaBean" class="headerlink" title="五、JavaBean"></a>五、JavaBean</h2><pre><code>JavaBean实际上是一个Java文件，需要为该类提供get/set方法（只选其一也是可以的），同时必须要有一个默认构造器（无参构造器）；具体见下面代码：
</code></pre><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> cn.itcast.domain;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">private</span> String username;</span><br><span class="line">    <span class="keyword">private</span> String password;</span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">int</span> age;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 实际上并不需要类中拥有一个成员，只需要有一个方法即可，方法会被转换为“去掉get/set后的、首字母小写的名称  所对应的属性”</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getName</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">"你想要返回的字符串"</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">/**</span></span><br><span class="line"><span class="comment">	* 为每个属性提供get/set方法</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getUsername</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> username;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setUsername</span><span class="params">(String username)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.username = username;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getPassword</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> password;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setPassword</span><span class="params">(String password)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.password = password;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getAge</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> age;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setAge</span><span class="params">(<span class="keyword">int</span> age)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.age = age;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>JavaBean规范：</strong></p>
<ol>
<li>必须提供一个默认构造器；</li>
<li>为属性提供get/set方法，如果只有get方法，那么这个属性是只读的；</li>
<li>属性：可以对应get/set方法的成员，也可以不用对应；此外，属性的名称由<code>get/set方法来指定</code></li>
</ol>
<p><strong>内省：</strong></p>
<p>流程：内省类–&gt;Bean信息–&gt;属性描述符数组–&gt;单个属性描述符的get/set方法–&gt;接着可以利用反射机制来执行方法。</p>
<p><strong>BeanUtils的使用：</strong></p>
<p><strong>见“BeanUtils的使用”20:30~最后</strong></p>
<h2 id="六、EL表达式"><a href="#六、EL表达式" class="headerlink" title="六、EL表达式"></a>六、EL表达式</h2><pre><code>EL表达式是JSP内置的表达式语言（由于是表达式，因此后面不需要加分号）。JSP2.0开始，要求不能使用java脚本，而EL表达式是用来取代`&lt;%=%&gt;`语句的，因此EL表达式只能用作输出。
</code></pre><p>EL表达式用来读取四大域：</p>
<ul>
<li><code>${xxx}</code>：全域查找名为xxx的属性，如果没找到，那么输出空字符串（而不是null）；</li>
<li>用指定域中查找属性：<code>${pageScope.xxx}</code>；（注意：后面的“Scope”不能丢）</li>
<li></li>
</ul>
<p>JavaBean导航：</p>
<pre><code>假设有一个bean为`Employee`，而`Employee`中含有属性`Address`，`Address`中含有属性`street`，那么，当把`Employee`对象设置到某个域中（例如request域中），此时，可以利用EL表达式来获取`street`的值；语法如下：
</code></pre><p><code>requestScope.emp.address.street</code>。</p>
<p>EL内置对象：</p>
<ul>
<li>前面四个为<code>pageScope、requestScope、sessionScope、applicationScope</code>；</li>
<li><code>param</code>：对应参数，是一个<code>Map&lt;String, String&gt;</code>，适用于单值属性；</li>
<li><code>paramValues</code>：对应参数，是一个<code>Map&lt;String, String[]&gt;</code>，适用于多值属性；</li>
<li><code>header</code>和<code>headerValues</code>：对应请求头，内容和<code>param</code>、<code>paramValues</code>相似；</li>
<li><code>initParam</code>：获取<code>&lt;context-param&gt;</code>定义的参数；</li>
<li><code>cookie</code>：是<code>Map&lt;String, Cookie&gt;</code>类型，根据键得到的值是<code>Cookie</code>类型，因此，还需要调用相关方法<code>getName()</code>、<code>getValue()</code>才能得到对应的名称或值；</li>
<li><code>pageContext</code>：对应<code>PageContext</code>对象；</li>
</ul>
<p>自定义函数库<u>（见视频“15.EL自定义函数库.avi”）</u>：</p>
<ul>
<li>写一个java类，类中可以定义0~N个方法，每个方法必须是<code>static</code> 并且有返回值；</li>
<li>在<code>WEB-INF</code>m目录下创建一个tld文件，并参考<code>jstl.jar</code>中的模板，编写tld文件；</li>
<li>最后，在JSP页面中导入标签，并使用标签；</li>
</ul>
<h1 id="Day-13"><a href="#Day-13" class="headerlink" title="Day 13"></a>Day 13</h1><h2 id="一、JSTL的概述"><a href="#一、JSTL的概述" class="headerlink" title="一、JSTL的概述"></a>一、JSTL的概述</h2><pre><code>JSTL是apache对EL表达式的扩展，使用JSTL标签需要导入`jstl.jar`；
</code></pre><p><strong>四大库：</strong></p>
<ul>
<li>core：核心库；</li>
<li>fmt：格式化库，常用的格式化需求有数字、日期；</li>
<li>sql：</li>
<li>xml：</li>
</ul>
<p><strong>导入标签库：</strong></p>
<ul>
<li>导入jar包；</li>
<li>在JSP页面中，使用指令<code>&lt;%@ taglib prefix=&quot;前缀&quot; uri=&quot;路径&quot;%&gt;</code></li>
</ul>
<p><strong>core：</strong></p>
<ol>
<li><p>out和set:</p>
<ul>
<li><p><code>&lt;c:out&gt;</code>：输出</p>
<ul>
<li><code>value</code>：可以是字符串常量，也可以是EL表达式</li>
<li><code>default</code>：当要输出的被容为<code>null</code>时，会输出default所对应的值；</li>
<li><code>escapeXml</code>：默认值为true，表示将内容转义；</li>
</ul>
</li>
<li><p><code>&lt;c:set&gt;</code>：设置（创建）域的属性</p>
<p><code>var</code>–&gt;变量名， <code>value</code>–&gt;变量值， <code>scope</code>–&gt;域，默认为page；</p>
</li>
</ul>
</li>
<li><p>remove：<br>删除域变量，其中<code>var</code>表示变量名，<code>scope</code>表示待删除的域，如果没有指定<code>scope</code>对象，那么默认删除所有域中的变量名；</p>
</li>
<li><p>url<br>url标签可以指定路径，同时，也可以为路径追加请求参数，用法如下：</p>
<ul>
<li><p><code>&lt;c:url value=&quot;/index.jsp&quot; /&gt;</code>：生成的最终路径为<code>/项目名称/index.jsp</code>;</p>
</li>
<li><figure class="highlight jsp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;c:url&gt;</span><br><span class="line">    &lt;c:param name=<span class="string">"username"</span> value=<span class="string">"张三"</span> /&gt;</span><br><span class="line">    ...</span><br><span class="line">&lt;/c:url&gt;</span><br><span class="line">最终生成的路径为：/项目名称/index.jsp?username=%XX%XX...(即自动进行url编码)</span><br></pre></td></tr></table></figure>
</li>
</ul>
<p><code>var</code>：指定变量名，当设置了这个属性时，url标签就不会输出到页面上，而是把url保存到域中，其中<code>scope</code>指定域。</p>
</li>
<li><p><code>if</code>标签和<code>choose</code>标签：<br><code>if</code>对应java中的if语句，<code>choose</code>对应java中的if…else if … else if … … else…语句。</p>
</li>
<li><p>==forEach标签：==<br>该标签可以用来遍历数组、集合，同时，还可以用来进行计数方式的循环；</p>
<ul>
<li><code>var</code> ：循环变量，对应java中for语句的<code>int i</code>；</li>
<li><code>begin</code>：设置循环变量的起始值；</li>
<li><code>end</code>：设置循环变量的终止值（包含终止值）；</li>
<li><code>step</code>：设置步长；</li>
</ul>
<p>上面的是计数方式的循环；下面介绍遍历数组和集合：</p>
<ul>
<li><code>items</code>：指定要循环的数组或集合；<strong>注意：EL表达式后、双引号前不能有空格！（<code>items=&quot;${requestScope.xxx }&quot;</code>）</strong></li>
<li><code>var</code>：把数组或集合中的每个元素赋值给该变量；</li>
</ul>
<p>此外，还可以使用<code>varStatus</code>来创建循环状态变量，用法如下：</p>
<ul>
<li><code>count</code>：循环元素的个数；</li>
<li><code>index</code>：循环元素的下标；</li>
<li><code>first</code>：是否为第一个元素；</li>
<li><code>last</code>：是否为最后一个元素；</li>
<li><code>current</code>：当前元素；</li>
</ul>
</li>
</ol>
<p>注意：填写uri路径时，不要导入错误的uri，正确的uri为：<code>http:..java.sun.com/jsp/jstl/core</code></p>
<p><strong>fmt库：</strong></p>
<pre><code>fmt库是一个格式化库。
</code></pre><ol>
<li><code>&lt;fmt:formatDate value=&quot;&quot; pattern=&quot;&quot; /&gt;</code>：用来输出一个由<code>value</code>指定的Date类型、<code>pattern</code>指定的格式的字符串；</li>
<li><code>&lt;fmt:formatNumber value=&quot;&quot; pattern=&quot;0.00&quot;/&gt;</code>：根据<code>pattern</code>输出保留指定位数的数字字符串（例子中是保留小数点后两位，如果小数点后面不足两位，那么补位，会四舍五入）；</li>
<li><code>&lt;fmt:formatNumber value=&quot;&quot; pattern=&quot;#.##&quot;/&gt;</code>：根据<code>pattern</code>输出保留指定位数的数字字符串（例子中是保留小数点后两位，如果小数点后面不足两位，那么不补位，会四舍五入）；</li>
</ol>
<h2 id="二、自定义标签"><a href="#二、自定义标签" class="headerlink" title="二、自定义标签"></a>二、自定义标签</h2><h3 id="步骤："><a href="#步骤：" class="headerlink" title="步骤："></a>步骤：</h3><ol>
<li>编写自定义标签类；</li>
<li>编写tld文件，将自定义标签类中的方法定义在tld文件中；</li>
<li>在JSP页面中引入tld文件：<code>&lt;%@ taglib%&gt;</code>；</li>
</ol>
<h3 id="标签处理类（没有在idea中运行起来）"><a href="#标签处理类（没有在idea中运行起来）" class="headerlink" title="标签处理类（没有在idea中运行起来）"></a>标签处理类（没有在idea中运行起来）</h3><p><code>SimpleTag</code>接口：</p>
<ul>
<li><code>void doTag()</code>：每次执行标签时都会调用这个方法；</li>
<li><code>JspTag getParent()</code>：获取父标签；（非生命周期方法）</li>
<li><code>void setParent(JspTag)</code>：设置父标签；</li>
<li><code>void setJspBody(JspFragment)</code>：设置标签体；</li>
<li><code>void setJspContext(JspContext)</code>：设置JSP上下文；</li>
</ul>
<p>其中，<code>doTag()</code>方法在后三个方法执行后再被tomcat调用；</p>
<p><code>SimpleTagSupport</code>类：</p>
<pre><code>该类继承了`SimpleTag`接口，同时封装了若干个成员，以及成员的get/set方法；
</code></pre><h3 id="标签体内容"><a href="#标签体内容" class="headerlink" title="标签体内容"></a>标签体内容</h3><ul>
<li><code>empty</code>：无标签体；</li>
<li><code>JSP</code>：表示标签体的内容可以是Java脚本、标签、也可以是EL表达式，但是在JSP2.0以后已经不再支持这个类型了；</li>
<li><code>scriptless</code>：只能是EL表达式，也可以是其他标签（这时就出现了“父标签”的概念）；</li>
</ul>
<p>用法如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> cn.itcast.tag;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> javax.servlet.jsp.JspException;</span><br><span class="line"><span class="keyword">import</span> javax.servlet.jsp.tagext.SimpleTagSupport;</span><br><span class="line"><span class="keyword">import</span> java.io.IOException;</span><br><span class="line"><span class="keyword">import</span> java.io.Writer;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyTag3</span> <span class="keyword">extends</span> <span class="title">SimpleTagSupport</span> </span>&#123;</span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">doTag</span><span class="params">()</span> <span class="keyword">throws</span> JspException, IOException </span>&#123;</span><br><span class="line">        <span class="comment">// ① 执行某一些动作</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// ② 再输出标签体</span></span><br><span class="line">        <span class="comment">// 先获取流对象</span></span><br><span class="line">        Writer out = getJspContext().getOut();</span><br><span class="line">        getJspBody().invoke(out);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// ③ 再执行某些动作</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>另：可以实现一种标签，这种标签后面的内容将完全忽略，实现方法如下：① 实现<code>SimpleTagSupport</code>类，并重载<code>doTag()</code>方法； ② 在<code>doTag()</code>方法中，抛出异常<code>throw new SkipPageException()</code>；    这个<code>SkipPageException</code>会忽略该标签后的所有内容，但是Tomcat会捕捉到它，并处理掉异常，因此，不会影响其他页面。</p>
<pre><code>&lt;u&gt;具体分析见“**11.自定义标签之SkipPageException，不再执行标签下面的内容.avi**”&lt;/u&gt;。可以参考其方法来分析源码。
</code></pre><h3 id="标签属性"><a href="#标签属性" class="headerlink" title="标签属性"></a>标签属性</h3><pre><code>可以为标签添加属性，例如`&lt;c:if test=&quot;&quot;/&gt;`中的`test..`就是属性；
</code></pre><p>步骤：</p>
<ol>
<li><p>给标签处理类添加属性<br>注意：属性至少需要一个<code>set</code>方法，<code>set</code>方法会在<code>doTag</code>方法之前被Tomcat调用，因此可以直接使用属性；</p>
</li>
<li><p>在tld文件中对属性进行配置：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">在<span class="tag">&lt;<span class="name">tag</span>&gt;</span>中写上：</span><br><span class="line">    <span class="tag">&lt;<span class="name">attribute</span>&gt;</span></span><br><span class="line">    	<span class="tag">&lt;<span class="name">name</span>&gt;</span><span class="tag">&lt;/<span class="name">name</span>&gt;</span>  指定属性名称</span><br><span class="line">        <span class="tag">&lt;<span class="name">required</span>&gt;</span><span class="tag">&lt;/<span class="name">required</span>&gt;</span>	指定是否为必需的</span><br><span class="line">        <span class="tag">&lt;<span class="name">rtexprvalue</span>&gt;</span><span class="tag">&lt;/<span class="name">rtexprvalue</span>&gt;</span>	指定是否能使用EL表达式</span><br><span class="line">    <span class="tag">&lt;/<span class="name">attribute</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="三、MVC设计模式和JavaWeb三层架构"><a href="#三、MVC设计模式和JavaWeb三层架构" class="headerlink" title="三、MVC设计模式和JavaWeb三层架构"></a>三、MVC设计模式和JavaWeb三层架构</h2><pre><code>MVC设计模式是独立于语言的，不是Java所独有的；而JavaWeb三层架构则是JavaWeb所独有的。
</code></pre><h3 id="JavaWeb三层架构："><a href="#JavaWeb三层架构：" class="headerlink" title="JavaWeb三层架构："></a>JavaWeb三层架构：</h3><ul>
<li>Web层；与Web相关的内容（Servlet， JSP， Servlet相关的API）；有时候，B/S架构和C/S架构可以重用业务层和数据层，而Web层则是B/S所独有的；</li>
<li>业务层；（可以理解为将数据的零散操作聚集为一个功能集合</li>
<li>数据层；（可以理解为数据的一些零散操作）；所有对数据库的操作，不能跳出到DAO之外；</li>
</ul>
<h1 id="Day-14-编码实战：登陆、注册功能"><a href="#Day-14-编码实战：登陆、注册功能" class="headerlink" title="Day 14 编码实战：登陆、注册功能"></a>Day 14 编码实战：登陆、注册功能</h1><h2 id="一、需求分析"><a href="#一、需求分析" class="headerlink" title="一、需求分析"></a>一、需求分析</h2><p>注册+登陆</p>
<h2 id="二、框架分析"><a href="#二、框架分析" class="headerlink" title="二、框架分析"></a>二、框架分析</h2><ol>
<li>前端页面（JSP）</li>
</ol>
<p>注册页面：regist.jsp；</p>
<p>登录页面：login.jsp；</p>
<ol start="2">
<li>Servlet</li>
</ol>
<p>处理注册的Servlet：RegisterServlet；</p>
<p>处理登录的Servlet：LoginServlet；</p>
<ol start="3">
<li>Service层</li>
</ol>
<p>定义一个UserService，作为本项目中唯一的service；UserService中需要定义两个方法：注册<code>regist()</code>和登录<code>login()</code>，这两个方法对应两个业务。</p>
<ol start="4">
<li>dao层</li>
</ol>
<p>使用xml作为数据库保存数据；该xml保存在项目中。</p>
<ol start="5">
<li>实体类domain</li>
</ol>
<p>定义实体类User，作为传递数据、保存数据的载体。</p>
<p>注意：User需要适配数据库中的数据，也需要适配表单中的数据；</p>
<ol start="6">
<li>数据库</li>
</ol>
<p>这个项目中使用xml文件作为数据库；</p>
<h2 id="三、注册功能分析"><a href="#三、注册功能分析" class="headerlink" title="三、注册功能分析"></a>三、注册功能分析</h2><h3 id="分析1："><a href="#分析1：" class="headerlink" title="分析1："></a>分析1：</h3><p>（1）前端页面：</p>
<ul>
<li>注册页面需要提供一个表单，供用户输入用户名和密码；</li>
<li>提供一个“注册”按钮，当用户点击这个按钮时，将表单的数据post到RegistServlet中；</li>
</ul>
<p>（2）Servlet：</p>
<ul>
<li>对于<code>RegistServlet</code>，需要在接受JSP页面上传过来的数据；注意，需要设置编码；</li>
<li>当接收到数据后，需要调用业务类UserService中的regist方法，进行注册；<ul>
<li>如果注册成功，那么重定向（转发）到“注册成功的界面；</li>
<li>如果注册失败，那么转发到”注册“界面，并显示出错信息；</li>
</ul>
</li>
</ul>
<p>（3）service层：</p>
<p>regist的业务逻辑：</p>
<ul>
<li>当数据库中不存在该用户名时，可以进行注册；</li>
<li>当数据库中已经存在该用户名时，注册失败，并返回注册失败；<br>扩展：在拓展项目时，由于注册失败可能有多个原因，因此，<code>regist</code>方法不能只返回true或false，必须定义错误类型，保存出错信息。<br>保存出错信息的方法：<ul>
<li>可以用另外一个枚举类型，用错误码定义错误类型；</li>
<li>可以用抛出异常的方式，通过抛出自定义异常类，而该自定义异常类可以保存出错信息；<br><strong>tips：</strong>这种方式更优雅，因为注册失败是通过错误码进行提示的，而注册成功应该直接执行接下来的业务，不应该再添加多余的信息。</li>
</ul>
</li>
<li>综上所述，我们需要：① 根据给定的用户名查询用户，并保存到一个变量A中； ② 如果A不为空，那么抛出一个自定义异常：（1）先自定义异常类，重写其方法（<strong>因为异常类往往只需要名字和出错信息即可，那么只需要定义好异常类的名字和继承父类的方法即可</strong>）； （2）接着再抛出异常即可；   ③ 如果A为空，那么插入一个用户到数据库中，并且返回；</li>
</ul>
<p>（4）dao层</p>
<pre><code>通过service层的分析，我们可以知道，dao层需要实现如下功能：
</code></pre><ul>
<li><p>根据用户名<code>username</code>查询数据库中是否含有该用户名的用户，如果有，那么返回该对象，否则，返回null；</p>
</li>
<li><p>将一个用户<code>user</code>插入到数据库中；</p>
<p>dao层直接copy其代码即可； </p>
</li>
</ul>
<h3 id="步骤1："><a href="#步骤1：" class="headerlink" title="步骤1："></a>步骤1：</h3><p>（4）dao层：</p>
<ul>
<li>先创建<code>UserDao</code>这个类，实现<code>findByUsername</code>和<code>insert</code>方法；</li>
<li>利用junit进行测试；</li>
</ul>
<p>（3）service层：</p>
<p>（2）Servlet层：</p>
<ol>
<li><p>封装表单数据：<br>可以使用<code>CommonUtils</code>工具包实现这个功能，注意使用的条件；代码如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">User user = CommonUtils.toBean(Map, <span class="class"><span class="keyword">class</span>)</span>;</span><br></pre></td></tr></table></figure>
</li>
<li><p>调用<code>UserService</code>的<code>findByUsername</code>方法，完成注册功能：</p>
<ul>
<li>当注册成功时，向页面显示超链接，超链接指向“登录页面”；</li>
<li>当注册失败时，将错误信息转发到<code>regist.jsp</code>页面，并显示错误信息；</li>
</ul>
</li>
</ol>
<p>（1）JSP显示页面：</p>
<ul>
<li>定义一个位置，存放出错信息；</li>
<li>当注册出现错误时，不能将用户输入的信息给清空掉，而是需要把该信息重新写入表单中；</li>
</ul>
<h3 id="添加图片验证码"><a href="#添加图片验证码" class="headerlink" title="添加图片验证码"></a>添加图片验证码</h3><h4 id="1-定义类VerifyCodeServlet，生成图片，并输出到对应的资源文件中"><a href="#1-定义类VerifyCodeServlet，生成图片，并输出到对应的资源文件中" class="headerlink" title="1. 定义类VerifyCodeServlet，生成图片，并输出到对应的资源文件中"></a>1. 定义类<code>VerifyCodeServlet</code>，生成图片，并输出到对应的资源文件中</h4><pre><code>定义一个Servlet：`VerfyCodeServlet`，它利用`VerifyCode`类生成一个随机的验证码图片，并获取验证码，最后将验证码图片输出到客户端的页面上。
</code></pre><ul>
<li><code>BufferedImage getImage ()</code>：获得一张随机验证码的图片；</li>
<li><code>String getText()</code>：获得验证码上的文本；这个文本需要保存到session中；</li>
<li><code>static void output()</code>：将图片输出到指定的资源文件中；</li>
</ul>
<h4 id="2-JSP页面中添加验证码"><a href="#2-JSP页面中添加验证码" class="headerlink" title="2. JSP页面中添加验证码"></a>2. JSP页面中添加验证码</h4><ul>
<li>定义一个图片区域，请求并显示验证码图片（<img src="/2018/11/13/JavaWeb-学习总结/....">）；</li>
<li>定义一个文本框，用于输入验证码；</li>
<li>定义“看不清，换一张”文本字样，它是一个超链接，指向<code>VerifyCodeServlet</code>，再生成一个验证码图片和验证码文本；  <u>由于可能存在浏览器缓存问题，因此，需要使用时间作为参数；</u></li>
</ul>
<h4 id="3-为RegistServlet-regist-添加处理验证码的逻辑"><a href="#3-为RegistServlet-regist-添加处理验证码的逻辑" class="headerlink" title="3. 为RegistServlet$regist()添加处理验证码的逻辑"></a>3. 为<code>RegistServlet$regist()</code>添加处理验证码的逻辑</h4><ul>
<li>判断验证码是否一致，如果一致，那么执行注册流程；</li>
<li>如果不一致，那么<strong>将用户刚刚输入的表单数据封装到<code>request</code>域中，并转发到<code>login.jsp</code>中</strong>，并给出出错信息；<br>注意：这里为了更好的用户体验，需要养成习惯：尽量不要在验证码出错的情况下要用户重新输入表单数据；</li>
</ul>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/11/13/hello-world/" rel="next" title="Hello World">
                <i class="fa fa-chevron-left"></i> Hello World
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/11/13/Java-300集/" rel="prev" title="Java-300集">
                Java-300集 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="/images/head.png"
                alt="John Doe" />
            
              <p class="site-author-name" itemprop="name">John Doe</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">5</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Day04："><span class="nav-number">1.</span> <span class="nav-text">Day04：</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1、HTML和CSS结合的方式"><span class="nav-number">1.0.1.</span> <span class="nav-text">1、HTML和CSS结合的方式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-CSS的基本选择器"><span class="nav-number">1.0.1.1.</span> <span class="nav-text">1 CSS的基本选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-CSS的扩展选择器"><span class="nav-number">1.0.1.2.</span> <span class="nav-text">2 CSS的扩展选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-CSS中的盒子模型"><span class="nav-number">1.0.1.3.</span> <span class="nav-text">3 CSS中的盒子模型</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-CSS的布局的漂浮（了解即可）"><span class="nav-number">1.0.1.4.</span> <span class="nav-text">4 CSS的布局的漂浮（了解即可）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-CSS布局的定位（了解即可）"><span class="nav-number">1.0.1.5.</span> <span class="nav-text">5 CSS布局的定位（了解即可）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2、javascript"><span class="nav-number">1.0.2.</span> <span class="nav-text">2、javascript</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-javascript的组成"><span class="nav-number">1.0.2.1.</span> <span class="nav-text">1.  javascript的组成</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-js和HTML的结合方式（两种）"><span class="nav-number">1.0.2.2.</span> <span class="nav-text">2. js和HTML的结合方式（两种）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-js的原始类型（五种）"><span class="nav-number">1.0.2.3.</span> <span class="nav-text">3. js的原始类型（五种）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-js的运算符"><span class="nav-number">1.0.2.4.</span> <span class="nav-text">4. js的运算符</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-js的函数定义及调用"><span class="nav-number">1.0.2.5.</span> <span class="nav-text">5. js的函数定义及调用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-js的全局变量好局部变量"><span class="nav-number">1.0.2.6.</span> <span class="nav-text">6. js的全局变量好局部变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#7-script标签的位置"><span class="nav-number">1.0.2.7.</span> <span class="nav-text">7. script标签的位置</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day-03"><span class="nav-number">2.</span> <span class="nav-text">Day 03</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#9、dom-对象"><span class="nav-number">2.0.1.</span> <span class="nav-text">9、dom 对象</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day05"><span class="nav-number">3.</span> <span class="nav-text">Day05</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#使用dom4j查询xml"><span class="nav-number">3.1.</span> <span class="nav-text">使用dom4j查询xml</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#使用dom4j实现添加操作"><span class="nav-number">3.2.</span> <span class="nav-text">使用dom4j实现添加操作</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day-03-1"><span class="nav-number">4.</span> <span class="nav-text">Day 03</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、javascript的对象"><span class="nav-number">4.1.</span> <span class="nav-text">一、javascript的对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-Array-对象的push函数"><span class="nav-number">4.1.1.</span> <span class="nav-text">1. Array 对象的push函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2、Date对象"><span class="nav-number">4.1.2.</span> <span class="nav-text">2、Date对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3、Math对象"><span class="nav-number">4.1.3.</span> <span class="nav-text">3、Math对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4、全局函数"><span class="nav-number">4.1.4.</span> <span class="nav-text">4、全局函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6、js-函数的重载"><span class="nav-number">4.1.5.</span> <span class="nav-text">6、js 函数的重载</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7、BOM对象"><span class="nav-number">4.1.6.</span> <span class="nav-text">7、BOM对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#window对象中的函数"><span class="nav-number">4.1.7.</span> <span class="nav-text">window对象中的函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#document-对象"><span class="nav-number">4.1.8.</span> <span class="nav-text">document 对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#window案例"><span class="nav-number">4.1.9.</span> <span class="nav-text">window案例</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#element对象"><span class="nav-number">4.1.10.</span> <span class="nav-text">element对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Node对象"><span class="nav-number">4.1.11.</span> <span class="nav-text">Node对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#操作dom树"><span class="nav-number">4.1.12.</span> <span class="nav-text">操作dom树</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#innerHTMl属性"><span class="nav-number">4.1.13.</span> <span class="nav-text">innerHTMl属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Day-08"><span class="nav-number">4.2.</span> <span class="nav-text">Day 08</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#一、Tomcat"><span class="nav-number">4.2.1.</span> <span class="nav-text">一、Tomcat</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#二、HTTP协议"><span class="nav-number">4.2.2.</span> <span class="nav-text">二、HTTP协议</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day09"><span class="nav-number">5.</span> <span class="nav-text">Day09</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#一、Servlet"><span class="nav-number">5.0.1.</span> <span class="nav-text">一、Servlet</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-学习-Servlet-接口"><span class="nav-number">5.0.1.1.</span> <span class="nav-text">1 学习 Servlet 接口</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-ServletConfig-对象"><span class="nav-number">5.0.1.2.</span> <span class="nav-text">2 ServletConfig 对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-HttpServlet类"><span class="nav-number">5.0.1.3.</span> <span class="nav-text">3 HttpServlet类</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-Servlet细节"><span class="nav-number">5.0.1.4.</span> <span class="nav-text">4 Servlet细节</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5-ServletContext-对象"><span class="nav-number">5.0.1.5.</span> <span class="nav-text">5 ServletContext 对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#6-获取类路径下的资源"><span class="nav-number">5.0.1.6.</span> <span class="nav-text">6 获取类路径下的资源</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#用法"><span class="nav-number">5.0.1.6.1.</span> <span class="nav-text">用法</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day10"><span class="nav-number">6.</span> <span class="nav-text">Day10</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、HttpServletResponse"><span class="nav-number">6.1.</span> <span class="nav-text">一、HttpServletResponse</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、HttpServletRequest"><span class="nav-number">6.2.</span> <span class="nav-text">二、HttpServletRequest</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三、编码与解码"><span class="nav-number">6.3.</span> <span class="nav-text">三、编码与解码</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#四、路径"><span class="nav-number">6.4.</span> <span class="nav-text">四、路径</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day11"><span class="nav-number">7.</span> <span class="nav-text">Day11</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、JSP"><span class="nav-number">7.1.</span> <span class="nav-text">一、JSP</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、Cookie"><span class="nav-number">7.2.</span> <span class="nav-text">二、Cookie</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三、HttpSession"><span class="nav-number">7.3.</span> <span class="nav-text">三、HttpSession</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day12"><span class="nav-number">8.</span> <span class="nav-text">Day12</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、JSP的三大指令"><span class="nav-number">8.1.</span> <span class="nav-text">一、JSP的三大指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、九大内置对象"><span class="nav-number">8.2.</span> <span class="nav-text">二、九大内置对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三、JSP指令"><span class="nav-number">8.3.</span> <span class="nav-text">三、JSP指令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#四、JSP动作标签"><span class="nav-number">8.4.</span> <span class="nav-text">四、JSP动作标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#五、JavaBean"><span class="nav-number">8.5.</span> <span class="nav-text">五、JavaBean</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#六、EL表达式"><span class="nav-number">8.6.</span> <span class="nav-text">六、EL表达式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day-13"><span class="nav-number">9.</span> <span class="nav-text">Day 13</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、JSTL的概述"><span class="nav-number">9.1.</span> <span class="nav-text">一、JSTL的概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、自定义标签"><span class="nav-number">9.2.</span> <span class="nav-text">二、自定义标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#步骤："><span class="nav-number">9.2.1.</span> <span class="nav-text">步骤：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签处理类（没有在idea中运行起来）"><span class="nav-number">9.2.2.</span> <span class="nav-text">标签处理类（没有在idea中运行起来）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签体内容"><span class="nav-number">9.2.3.</span> <span class="nav-text">标签体内容</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#标签属性"><span class="nav-number">9.2.4.</span> <span class="nav-text">标签属性</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三、MVC设计模式和JavaWeb三层架构"><span class="nav-number">9.3.</span> <span class="nav-text">三、MVC设计模式和JavaWeb三层架构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaWeb三层架构："><span class="nav-number">9.3.1.</span> <span class="nav-text">JavaWeb三层架构：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Day-14-编码实战：登陆、注册功能"><span class="nav-number">10.</span> <span class="nav-text">Day 14 编码实战：登陆、注册功能</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、需求分析"><span class="nav-number">10.1.</span> <span class="nav-text">一、需求分析</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、框架分析"><span class="nav-number">10.2.</span> <span class="nav-text">二、框架分析</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#三、注册功能分析"><span class="nav-number">10.3.</span> <span class="nav-text">三、注册功能分析</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#分析1："><span class="nav-number">10.3.1.</span> <span class="nav-text">分析1：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#步骤1："><span class="nav-number">10.3.2.</span> <span class="nav-text">步骤1：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#添加图片验证码"><span class="nav-number">10.3.3.</span> <span class="nav-text">添加图片验证码</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-定义类VerifyCodeServlet，生成图片，并输出到对应的资源文件中"><span class="nav-number">10.3.3.1.</span> <span class="nav-text">1. 定义类VerifyCodeServlet，生成图片，并输出到对应的资源文件中</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-JSP页面中添加验证码"><span class="nav-number">10.3.3.2.</span> <span class="nav-text">2. JSP页面中添加验证码</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-为RegistServlet-regist-添加处理验证码的逻辑"><span class="nav-number">10.3.3.3.</span> <span class="nav-text">3. 为RegistServlet$regist()添加处理验证码的逻辑</span></a></li></ol></li></ol></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">John Doe</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">11.7k</span>
  
</div>


  <div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">Theme &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  








  
  





  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/three.min.js"></script>
  

  
  
    <script type="text/javascript" src="/lib/three/canvas_sphere.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


  

  

</body>
</html>
